<template>
  <div>
    <editorLayout
      :title="$t('quickCreate.dot1xAll')"
      :isVisible="isVisible"
      :steps="steps"
      :currentStep="currentStep"
      @close="onClose"
    >
      <div v-show="currentStep === 0">
        <authForm formType="dot1xWired" ref="authFormRef"></authForm>
      </div>
      <div v-show="currentStep === 1" style="height: 100%">
        <userSourceSelector
          ruleType="dot1x"
          ref="userSourceSelectorRef"
        ></userSourceSelector>
      </div>
      <div v-show="currentStep === 2" style="height: 100%">
        <deviceGroupSelector
          ruleType="dot1x"
          ref="deviceGroupSelectorRef"
        ></deviceGroupSelector>
      </div>
      <div slot="foot" class="footer">
        <div class="btn-wrapper">
          <a-button @click="onClickPrevious" v-show="currentStep > 0">
            {{ $t('common.back') }}
          </a-button>
          <a-button type="primary" @click="onClickNext">
            {{ nextBtnTxt }}
          </a-button>
        </div>
      </div>
    </editorLayout>
  </div>
</template>
<script>
import editorLayout from '@project/authSys/components/editorLayout';
import userSourceSelector from '../userSourceSelector';
import deviceGroupSelector from '../deviceGroupSelector';
import authForm from '../authForm';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
import { maccApi } from '@utils/index';
export default {
  name: 'dot1xWiredAuthCreator',
  mixins: [authSysMixin],
  components: {
    editorLayout,
    authForm,
    userSourceSelector,
    deviceGroupSelector,
  },
  data() {
    return {
      isVisible: false,
      currentStep: 0,
      steps: [
        this.$t('quickCreate.rule'),
        this.$t('quickCreate.source'),
        this.$t('quickCreate.devGroup'),
      ],
      ruleForm: {},
    };
  },
  mounted() {},
  computed: {
    nextBtnTxt() {
      if (this.currentStep === this.steps.length - 1) {
        return this.$t('quickCreate.confirmAdd');
      }
      return this.$t('common.next');
    },
  },
  methods: {
    onClickPrevious() {
      this.currentStep--;
    },
    async onClickNext() {
      if (this.currentStep === 0) {
        const res = await this.getRuleConf();
        if (!res) {
          return false;
        }
        this.currentStep++;
      } else if (this.currentStep === 1) {
        const res = await this.getUserSourceConf();
        if (!res) {
          return false;
        }
        this.currentStep++;
      } else if (this.currentStep === 2) {
        const res = await this.getDeviceGroupConf();
        if (!res) {
          return false;
        }
        this.onSave();
      }
    },
    async onSave() {
      this.ruleForm = {
        ...this.ruleForm,
        tenantId: this.tenantInfo.tenantId,
        groupId: this.groupId,
      };
      const res = await this.requestHttpAuth({
        api: maccApi.MACC_RULE_ADD_POST_API,
        method: 'POST',
        params: this.ruleForm,
      });

      if (res.data.success) {
        this.authDeviceGroups = res.data.result.items;
        this.$message.success(this.$t('common.addSuceess'));

        const currentPath = this.$route.path;
        if (currentPath.includes('ruleList')) {
          this.isVisible = false;
          this.$emit('refreshList');
          this.resetCreator();
        } else {
          this.$router.push('authConf_ruleList_menu');
        }
      } else {
        this.$message.warning(res.data.message);
      }
    },
    resetCreator() {
      this.currentStep = 0;
      this.$refs.authFormRef.resetForm();
      this.$refs.userSourceSelectorRef.resetSelector();
      this.$refs.deviceGroupSelectorRef.resetSelector();
    },
    async getDeviceGroupConf() {
      const deviceGroupIds =
        await this.$refs.deviceGroupSelectorRef.getSelectedIds();
      if (deviceGroupIds) {
        this.ruleForm.areaIds = deviceGroupIds.join(',');
        return true;
      } else {
        return false;
      }
    },
    async getUserSourceConf() {
      const userSourceIds =
        await this.$refs.userSourceSelectorRef.getSelectedIds();
      if (userSourceIds) {
        this.ruleForm.accountSourceIds = userSourceIds.join(',');
        return true;
      } else {
        return false;
      }
    },
    async getRuleConf() {
      const authModel = await this.$refs.authFormRef.getModel();
      if (authModel) {
        this.ruleForm = { ...authModel };
        return true;
      } else {
        return false;
      }
    },
    openEditor() {
      this.isVisible = true;
      this.$refs.userSourceSelectorRef.selectAll();
    },
    onClose() {
      this.resetCreator();
      this.isVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.btn-wrapper {
  display: flex;
  gap: 16px;
}
</style>
